<template>
	<div class="discover-page">
		<!-- 轮播图 -->
		<div class="banner-section">
			<el-carousel height="180px" indicator-position="outside">
				<el-carousel-item v-for="item in banners" :key="item.id">
					<div class="banner-item" :style="{ backgroundImage: `url(${item.image})` }">
						<div class="banner-overlay">
							<h3>{{ item.title }}</h3>
						</div>
					</div>
				</el-carousel-item>
			</el-carousel>
		</div>

		<!-- 推荐歌单 -->
		<div class="section">
			<div class="section-header">
				<h2 class="section-title">推荐歌单</h2>
				<el-link type="primary" :underline="false">更多 ></el-link>
			</div>
			<div class="playlist-grid">
				<div 
					v-for="item in recommendPlaylists" 
					:key="item.id"
					class="playlist-card"
					@click="handlePlaylistClick(item.id)"
				>
					<div class="playlist-cover">
						<img :src="item.cover" :alt="item.name" />
						<div class="play-overlay">
							<el-icon :size="40" class="play-icon">
								<VideoPlay />
							</el-icon>
						</div>
						<div class="play-count">
							<el-icon><Headset /></el-icon>
							{{ formatCount(item.playCount) }}
						</div>
					</div>
					<div class="playlist-name">{{ item.name }}</div>
				</div>
			</div>
		</div>

		<!-- 最新音乐 -->
		<div class="section">
			<div class="section-header">
				<h2 class="section-title">最新音乐</h2>
				<el-link type="primary" :underline="false">更多 ></el-link>
			</div>
			<div class="song-list">
				<div 
					v-for="(item, index) in newSongs" 
					:key="item.id"
					class="song-item"
					@dblclick="handlePlaySong(item)"
				>
					<div class="song-index">{{ (index + 1).toString().padStart(2, '0') }}</div>
					<div class="song-cover-small">
						<img :src="item.cover" :alt="item.name" />
					</div>
					<div class="song-info-detail">
						<div class="song-name-text">{{ item.name }}</div>
						<div class="song-artist-text">{{ item.artist }}</div>
					</div>
					<div class="song-album">{{ item.album }}</div>
					<div class="song-duration-text">{{ formatDuration(item.duration) }}</div>
					<div class="song-actions-list">
						<el-icon class="action-icon-item"><VideoPlay /></el-icon>
						<el-icon class="action-icon-item"><Plus /></el-icon>
						<el-icon class="action-icon-item"><Download /></el-icon>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { VideoPlay, Headset, Plus, Download } from '@element-plus/icons-vue';

const router = useRouter();

// 轮播图数据
const banners = ref([
	{ id: 1, image: 'https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=800&h=180&fit=crop', title: '发现好音乐' },
	{ id: 2, image: 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=800&h=180&fit=crop', title: '热门推荐' },
	{ id: 3, image: 'https://images.unsplash.com/photo-1514320291840-2e0a9bf2a9ae?w=800&h=180&fit=crop', title: '新歌首发' }
]);

// 推荐歌单
const recommendPlaylists = ref([
	{ id: 1, name: '华语流行精选', cover: 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=200&h=200&fit=crop', playCount: 128500 },
	{ id: 2, name: '欧美经典', cover: 'https://images.unsplash.com/photo-1510915361894-db8b60106cb1?w=200&h=200&fit=crop', playCount: 98600 },
	{ id: 3, name: '日系音乐', cover: 'https://images.unsplash.com/photo-1507838153414-b4b713384a76?w=200&h=200&fit=crop', playCount: 76300 },
	{ id: 4, name: '轻音乐合集', cover: 'https://images.unsplash.com/photo-1459749411175-04bf5292ceea?w=200&h=200&fit=crop', playCount: 156800 },
	{ id: 5, name: '电音专区', cover: 'https://images.unsplash.com/photo-1571330735066-03aaa9429d89?w=200&h=200&fit=crop', playCount: 89200 }
]);

// 最新音乐
const newSongs = ref([
	{ id: 1, name: '示例歌曲1', artist: '艺术家A', album: '专辑A', duration: 245, cover: 'https://images.unsplash.com/photo-1487180144351-b8472da7d491?w=50&h=50&fit=crop' },
	{ id: 2, name: '示例歌曲2', artist: '艺术家B', album: '专辑B', duration: 198, cover: 'https://images.unsplash.com/photo-1458560871784-56d23406c091?w=50&h=50&fit=crop' },
	{ id: 3, name: '示例歌曲3', artist: '艺术家C', album: '专辑C', duration: 212, cover: 'https://images.unsplash.com/photo-1446057032654-9d8885db76c6?w=50&h=50&fit=crop' },
	{ id: 4, name: '示例歌曲4', artist: '艺术家D', album: '专辑D', duration: 189, cover: 'https://images.unsplash.com/photo-1506157786151-b8491531f063?w=50&h=50&fit=crop' },
	{ id: 5, name: '示例歌曲5', artist: '艺术家E', album: '专辑E', duration: 256, cover: 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=50&h=50&fit=crop' }
]);

// 格式化播放数量
const formatCount = (count: number): string => {
	if (count >= 10000) {
		return (count / 10000).toFixed(1) + '万';
	}
	return count.toString();
};

// 格式化时长
const formatDuration = (seconds: number): string => {
	const mins = Math.floor(seconds / 60);
	const secs = Math.floor(seconds % 60);
	return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};

// 歌单点击
const handlePlaylistClick = (id: number) => {
	router.push(`/playlist/${id}`);
};

// 播放歌曲
const handlePlaySong = (song: any) => {
	console.log('播放歌曲:', song);
};
</script>

<style scoped lang="scss">
.discover-page {
	padding: 20px;

	.banner-section {
		margin-bottom: 30px;

		.banner-item {
			width: 100%;
			height: 180px;
			background-size: cover;
			background-position: center;
			border-radius: 12px;
			position: relative;
			overflow: hidden;

			.banner-overlay {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				padding: 20px;
				background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);

				h3 {
					color: #fff;
					font-size: 24px;
					margin: 0;
				}
			}
		}
	}

	.section {
		margin-bottom: 40px;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;

			.section-title {
				font-size: 20px;
				font-weight: 600;
				color: #333;
				margin: 0;
			}
		}

		.playlist-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
			gap: 20px;

			.playlist-card {
				cursor: pointer;
				transition: all 0.3s;

				&:hover {
					transform: translateY(-5px);

					.play-overlay {
						opacity: 1;
					}
				}

				.playlist-cover {
					position: relative;
					width: 100%;
					padding-bottom: 100%;
					border-radius: 8px;
					overflow: hidden;
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

					img {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						object-fit: cover;
					}

					.play-overlay {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background: rgba(0, 0, 0, 0.4);
						display: flex;
						align-items: center;
						justify-content: center;
						opacity: 0;
						transition: all 0.3s;

						.play-icon {
							color: #fff;
						}
					}

					.play-count {
						position: absolute;
						top: 8px;
						right: 8px;
						display: flex;
						align-items: center;
						gap: 4px;
						color: #fff;
						font-size: 12px;
						background: rgba(0, 0, 0, 0.5);
						padding: 4px 8px;
						border-radius: 12px;
					}
				}

				.playlist-name {
					margin-top: 8px;
					font-size: 14px;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					line-height: 1.4;
				}
			}
		}

		.song-list {
			.song-item {
				display: flex;
				align-items: center;
				padding: 12px;
				border-radius: 8px;
				transition: all 0.3s;

				&:hover {
					background: #f5f5f5;

					.song-actions-list {
						opacity: 1;
					}
				}

				.song-index {
					width: 40px;
					text-align: center;
					color: #999;
					font-size: 14px;
				}

				.song-cover-small {
					width: 50px;
					height: 50px;
					border-radius: 6px;
					overflow: hidden;
					margin-right: 12px;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.song-info-detail {
					flex: 1;
					min-width: 0;
					margin-right: 20px;

					.song-name-text {
						font-size: 14px;
						color: #333;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-bottom: 4px;
					}

					.song-artist-text {
						font-size: 12px;
						color: #999;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.song-album {
					width: 200px;
					font-size: 13px;
					color: #666;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 20px;
				}

				.song-duration-text {
					width: 60px;
					text-align: center;
					font-size: 13px;
					color: #999;
					margin-right: 20px;
				}

				.song-actions-list {
					display: flex;
					gap: 12px;
					opacity: 0;
					transition: all 0.3s;

					.action-icon-item {
						cursor: pointer;
						color: #666;
						font-size: 18px;

						&:hover {
							color: #667eea;
						}
					}
				}
			}
		}
	}
}
</style>
